<template>
  <div class="upload-img-copm">
    <span class="title">{{text}}</span>
    <div class="header-img">
      <input class="inp-img" type="file" name="file" @change="uploadImg" id="file_upload">
      <div class="camera-div-gai">
        <span class="icon-add">+</span>
      </div>
      <img id="preview" :src="imgUrl" alt="">
	  </div>
  </div>
</template>

<script>
import axios from 'axios'
import { compress} from 'common/js/util.js'
import { Toast } from 'mint-ui' 
export default {
  data() {
    return {
    }
  },
  props: {
    text: {
        type:String,
        default:''
    },
    imgUrl : {
      type:String,
      default:''
    }
  },
  methods: {
    uploadImg: function (e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)return;
      
      //去上传
      let file = e.target.files[0]; 
      console.log(file)
      let that = this;
      compress(file, 0.5, function (err, data) {
          if (err) {
              console.log(err);
              return;
          }
          console.log(data)
          let param = new FormData(); //创建form对象
          param.append('file',data);//通过append向form对象添加数据
          param.append('uid',localStorage.getItem("uid"));//添加form表单中其他数据
          //console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          axios.post(HOST + '/Shop/upload',param,config)
          .then(res=>{
            res = res.data;
            let result = res.result
            if(result == "success"){
              console.log(res.data.url);
              //设置头像img
              let $img = document.getElementById("preview");
              //var windowURL = window.URL || window.webkitURL;
              //var dataURL = windowURL.createObjectURL(files[0]);
              var imgurl = res.data.url;
              that.$emit('imgurl',imgurl);
              $img.src = imgurl;
              //$img.style.zIndex = 9;
            }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
          })
          
      }); 
      
    }
  }
}
</script>

<style lang="stylus">
.upload-img-copm
  background:#f5f5f9
  padding:10px
  .title
    font-size:16px
  .header-img
    height: 70px
    width: 70px
    border-radius: 35px
    margin: 10px 0
    position: relative
    .inp-img
      height: 70px
      width: 70px
      position: absolute
      top: 0
      left: 105px
      z-index: 10
      opacity: 0
    .camera-div-gai
      width: 70px
      height: 70px
      background-color: #fff
      text-align: center
      position: absolute
      top: 0
      left: 105px
      z-index: 1
      .icon-add
        display:block
        font-size:40px
        color:#9d9d9d
        margin-top:25px
    #preview
      width: 70px
      height: 70px
      position: absolute
      top: 0
      left: 105px
      z-index:9

</style>